<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <button @click="count++">根++</button>
        <div>{{count}}</div>
        <home></home>
    </div>

    <template id="home">
        <div>home.....</div>
        <child></child>
    </template>
    <template id="child">
        <button>增加</button>
        <div>child.....</div>
        <div>根组件数据count-----{{child}}</div>
        <div>根组件数据count2-----{{child2}}</div>
    </template>
</body>
</html>
<script>

    //provide 向下传递数据 
        //写法：
            // provide:{
            //     return{
            //         msg:'msg'
            //     }
            // }

    //注意：：如果provide 想要向下传递 data 里面的数据 需要写成 函数形式
    const {computed} = Vue
    const app = Vue.createApp({
        data() {
            return {
                count:15
            }
        },
        provide(){
            return{
                msg:'msg....',
                add:'add',
                child:this.count,
                child2:computed(()=>this.count)
            }
        },
        components:{
            home:{
                template:'#home',
                components:{
                    child:{
                        template:'#child',
                        // inject:['msg'],//数组形式 直接传递
                        inject:{
                            mmsg:{
                                from:'add'//给传下来的数据 修改名字
                            },
                            child:{
                                from:'child'
                            },
                            child2:{
                                from:'child2'
                            }
                        }
                    }
                }
            }
        }
    })
    app.config.unwrapInjectedRef = true
    app.mount('#app')
</script>